<template>
	<view class="content">
		<input id='search' type='text' placeholder="搜索" />
		<image class="logo" src="/static/logo.png"></image>
		<swiper indicator-dots="true" indicator-active-color="red" autoplay="true" circular="true">
			<swiper-item>
				<image src="/static/swiper/swiper1.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/swiper/swiper2.jpg"></image>
			</swiper-item>
		</swiper>
		<view class="ad">
			<image src="/static/tag.png" class="bg"></image>
			<view class="gg">
				<text class="texttitle">益智星平台上线啦</text>
				<text class="textcontent">加入我们成为首批用户</text>
			</view>
		</view>
		<view id="background">
			<image class="background" src="/static/background.png"></image>
		</view>
	</view>
</template>

<script scoped>
	export default {
		data() {
			return {}
		},
		methods: {}
	}
</script>
<style scoped>
	.content {
		position: relative;
		flex-direction: column;
		top: var(--status-bar-height);
	}
	#search {
		position: sticky;
		text-align: center;
		width: 80%;
		left: 5%;
		height: 60rpx;
		border-radius: 20rpx;
		background-color: #cccccc;
	}
	.logo {
		position: absolute;
		height: 70rpx;
		top: 0;
		width: 70rpx;
		left: 86%;
	}
	swiper {
		padding: 20rpx 12rpx 0 12rpx;
		height: 380rpx;
		width: 726rpx;
	}
	.ad {
		padding: 12rpx 12rpx;
		position: relative;
		width: 726rpx;
		height: 180rpx;
		background-color: #dadada;
	}
	.bg {z-index: 2;width: 216rpx;height: 180rpx;}
	.gg{
		text-align: center;
		position: absolute;
		width: 480rpx;
		top: 24rpx;
		left: 70rpx;
		display: flex;
		z-index: 1;
		flex-direction: column;
		padding: 10rpx 80rpx;
		background-color: #ffaa00;
		border-radius: 150rpx;
	}
	.texttitle{
		font-size: 44rpx;
		font-weight: bold;
		color: white;
	}
	.textcontent{
		margin-top: 2px;
		font-size: 34rpx;
		font-weight: 400;
		background: linear-gradient(0deg, rgba(120, 255, 224, 1) 10%, rgba(255, 255, 255, 1) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	#background {
		padding: 4rpx 12rpx 4rpx 12rpx;
		position: relative;
		width: 726rpx;
		height: 1760rpx;
		background-color: #dadada;
	}
	image{height:100%;width: 100%;}
</style>
